{% load i18n %}
{% load tz %}
{% spaceless %}
{% if key == 'silence-all' %}
<div class="panel panel-warning collapse" id="show-{{ key|slugify }}">
  <div class="panel-heading">Silences {{ silences|length }}</div>
{% else %}
<div class="panel panel-warning">
  <div class="panel-heading">
    <a class="btn btn-warning btn-sm" role="button" data-toggle="collapse" href="#show-{{ key|slugify }}" aria-expanded="false" aria-controls="collapseExample">
    Silences {{ silences|length }}
    </a>
  </div>
  <div class="panel panel-warning collapse" id="show-{{ key|slugify }}">
{% endif %}
  <table class="table table-bordered table-condensed">
  <tr>
    <th>Starts</th>
    <th>Ends</th>
    <th>Matchers</th>
    <th>Comment</th>
    <th>CreatedBy</th>
    <th>Expire</th>
  </tr>
{% for silence in silences|dictsort:"endsAt" %}
  <tr>
    <td>{{ silence.startsAt|timezone:TIMEZONE }}</td>
    <td>{{ silence.endsAt|timezone:TIMEZONE }}</td>
    <td>
      {% for matcher in silence.matchers %}
        <a
          @click.prevent="silenceSetLabels"
          class="label label-warning"
          data-{{matcher.name}}="{{matcher.value}}"
          href="#"
          style="display: inline-block;"
          >{{ matcher.name }}:{{ matcher.value }}</a>
      {% endfor %}
    </td>
    <td>{{ silence.comment }}</td>
    <td>{{ silence.createdBy }}</td>
    <td>
      <form method="post" action="{% url 'silence-expire' %}">
        <div>
          <button class="btn btn-warning btn-xs">{% trans "Expire" %}</button>
        </div>
        <input name="silence_id" type="hidden" value="{{ silence.id }}" />
        <input name="next" type="hidden" value="{{ request.POST.referer }}" />
        {% csrf_token %}
      </form>
    </td>
  </tr>
{% endfor %}
  </table>
{% if key == 'silence-all' %}
</div>
{% else %}
  </div>
</div>
{% endif %}
{% endspaceless %}
